<template>
	<!-- 全部订单 -->
	<div id="order">
		<van-nav-bar left-arrow @click-left="onClickLeft" title="我的订单"/>
		<van-tabs v-model="active" background="#F0F0F0">
		  <van-tab title="全部">
			  <div v-for="i in all">
				  <div style="border-radius: 0.2666rem;margin: 0.2666rem;width: 95%;height: 180px;background-color: white;">
					  <div class="shop">
						  <van-icon name="shop" size="20" />
						  <p class="shop_name">硕果时代购物中心店</p>
						  <p style="float: right;color: #A9A9A9;">{{i.states}}</p>
					  </div>
					  <van-card
						:desc="i.text"
						:num="i.num"
						:thumb="i.url"
						style="background-color: white;"			
					  >
						<template #title>
							<h3>{{i.title}}</h3>
						</template>
						<template #price>
							<h2 style="color: #FF5809;">￥{{i.price}}</h2>
						</template>
						<template #footer>
						  <van-button size="small" round style="background-color: #ffd700;width: 2rem;" @click="cancel(i.button1)">{{i.button1}}</van-button>
						  <van-button size="small" round style="width: 2rem;">{{i.button2}}</van-button>
						</template>
					  </van-card>
				  </div>
			  </div>
		  </van-tab>
		  <van-tab title="待支付">
			  <div v-for="i in payment">
				  <div style="border-radius: 0.2666rem;margin: 0.2666rem;width: 95%;height: 180px;background-color: white;">
					  <div class="shop">
						  <van-icon name="shop" size="20" />
						  <p class="shop_name">硕果时代购物中心店</p>
						  <p style="float: right;color: #A9A9A9;">{{i.states}}</p>
					  </div>
					  <van-card
						:desc="i.text"
						:num="i.num"
						:thumb="i.url"
						style="background-color: white;"			
					  >
						<template #title>
							<h3>{{i.title}}</h3>
						</template>
						<template #price>
							<h2 style="color: #FF5809;">￥{{i.price}}</h2>
						</template>
						<template #footer>
						  <van-button size="small" round style="background-color: #ffd700;width: 2rem;" @click="cancel(i.button1)">{{i.button1}}</van-button>
						  <van-button size="small" round style="width: 2rem;">{{i.button2}}</van-button>
						</template>
					  </van-card>
				  </div>
			  </div>
		  </van-tab>
		  <van-tab title="待收货">
			  <!-- <div v-for="i in takeover">
				  <div style="border-radius: 0.2666rem;margin: 0.2666rem;width: 95%;height: 180px;background-color: white;">
					  <div class="shop">
						  <van-icon name="shop" size="20" />
						  <p class="shop_name">硕果时代购物中心店</p>
						  <p style="float: right;color: #A9A9A9;">{{i.states}}</p>
					  </div>
					  <van-card
						:desc="i.text"
						:num="i.num"
						:thumb="i.url"
						style="background-color: white;"			
					  >
						<template #title>
							<h3>{{i.title}}</h3>
						</template>
						<template #price>
							<h2 style="color: #FF5809;">￥{{i.price}}</h2>
						</template>
						<template #footer>
						  <van-button size="small" round style="background-color: #ffd700;width: 2rem;">{{i.button1}}</van-button>
						  <van-button size="small" round style="width: 2rem;">{{i.button2}}</van-button>
						</template>
					  </van-card>
				  </div>
			  </div> -->
			  <div v-show="active">
			  	<van-empty
			  	  class="custom-image"
			  	  image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
			  	  description="在忙,也要选杯奶茶犒劳自己~~"
			  	><van-button round type="danger" class="bottom-button" to="/menu">去喝一杯</van-button>
			  	</van-empty>
			  </div>
		  </van-tab>
		  <van-tab title="待评价">
			  <div v-for="i in evaluate">
				  <div style="border-radius: 0.2666rem;margin:30px 0.2666rem;width: 95%;height: 180px;background-color: white;">
					  <div class="shop">
						  <van-icon name="shop" size="20" />
						  <p class="shop_name">硕果时代购物中心店</p>
						  <p style="float: right;color: #A9A9A9;">{{i.states}}</p>
					  </div>
					  <van-card
						:desc="i.text"
						:num="i.num"
						:thumb="i.url"
						style="background-color: white;"			
					  >
						<template #title>
							<h3>{{i.title}}</h3>
						</template>
						<template #price>
							<h2 style="color: #FF5809;">￥{{i.price}}</h2>
						</template>
						<template #footer>
						  <van-button size="small" round style="background-color: #ffd700;width: 2rem;" @click="cancel(i.button1)">{{i.button1}}</van-button>
						  <van-button size="small" round style="width: 2rem;">{{i.button2}}</van-button>
						</template>
					  </van-card>
				  </div>
			  </div>
		  </van-tab>
		  <van-tab title="退款/售后">
				  <div v-for="i in refund">
					  <div style="border-radius: 0.2666rem;margin: 0.2666rem;width: 95%;height: 180px;background-color: white;">
						  <div class="shop">
							  <van-icon name="shop" size="20" />
							  <p class="shop_name">硕果时代购物中心店</p>
							  <p style="float: right;color: #A9A9A9;">{{i.states}}</p>
						  </div>
						  <van-card
							:desc="i.text"
							:num="i.num"
							:thumb="i.url"
							style="background-color: white;"			
						  >
							<template #title>
								<h3>{{i.title}}</h3>
							</template>
							<template #price>
								<h2 style="color: #FF5809;">￥{{i.price}}</h2>
							</template>
							<template #footer>
							  <van-button size="small" round style="background-color: #ffd700;width: 2rem;" @click="cancel(i.button1)">{{i.button1}}</van-button>
							  <van-button size="small" round style="width: 2rem;">{{i.button2}}</van-button>
							</template>
						  </van-card>
					  </div>
				  </div>
		  </van-tab>
		</van-tabs>
	</div>
</template>

<script>
	export default {
		name: 'order',
		data(){
			return{
				active: Number(this.$route.query.num),
				all:[{
						url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1711131000,2525767128&fm=26&gp=0.jpg',
						title: '大满贯奶茶',
						num: '2',
						states: '配送中',
						text: '椰果，红豆，布丁全加，超满足',
						price: "24.00",
						button1: "取消订单",
						button2: "查看物流"
					},
					{
						url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1121230777,403140859&fm=26&gp=0.jpg',
						title: '橙意满满',
						num: '1',
						states: '已送达',
						text: '给我一点橙意，陪你整个夏季',
						price: "9.00",
						button1: "删除订单",
						button2: "再来一单"
					},
					{
						url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1213046967,3588724362&fm=26&gp=0.jpg',
						title: '多肉葡萄',
						num: '1',
						states: '待评价',
						text: '当季云南葡萄，颗颗手剥果肉，新鲜饱满',
						price: "11.00",
						button1: "再来一单",
						button2: "评价"
					},
					{
						url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1121230777,403140859&fm=26&gp=0.jpg',
						title: '橙意满满',
						num: '1',
						states: '退款中',
						text: '给我一点橙意，陪你整个夏季',
						price: "9.00",
						button1: "再来一单",
						button2: "退款进度"
					}],
				payment:[
					{
						url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4096475297,1627897154&fm=26&gp=0.jpg',
						title: '少女心拿铁',
						num: '1',
						states: '待支付',
						text: '少女心爆棚的蔓越莓拿铁',
						price: "10.00",
						button1: "取消订单",
						button2: "付款"
					},
					{
						url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2607601129,2265087037&fm=26&gp=0.jpg',
						title: '布丁奶茶',
						num: '1',
						states: '待支付',
						text: '大块布丁加入，甜而不腻，超满足',
						price: "13.00",
						button1: "取消订单",
						button2: "付款"
					}],
				takeover:[
					
				],
				evaluate:[
					{
						url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4096475297,1627897154&fm=26&gp=0.jpg',
						title: '少女心拿铁',
						num: '1',
						states: '待评价',
						text: '少女心爆棚的蔓越莓拿铁',
						price: "10.00",
						button1: "再来一单",
						button2: "评价"
					}
				],
				refund:[
					{
						url: 'http://p9.itc.cn/q_70/images03/20200619/39e917ceeb2d425fa3edf6be64fec887.jpeg',
						title: '平平无奇',
						num: '1',
						states: '已退款',
						text: '一杯好喝的平平无奇',
						price: "7.00",
						button1: "再来一单",
						button2: "退款进度"
					},
					{
						url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2351723282,881322285&fm=26&gp=0.jpg',
						title: '桃气泡泡',
						num: '1',
						states: '退款中',
						text: '真实的水蜜桃口味，仿佛在口腔跳舞',
						price: "12.00",
						button1: "再来一单",
						button2: "退款进度"
					}
				]
			}
		},
		components:{
			
		},
		methods:{
			onClickLeft(){
				this.$router.go(-1);
			},
			cancel(i){
				if(i === "取消订单"){
					this.$dialog.confirm({
					  title: '订单取消',
					  message: '取消无法恢复，优惠卷自动退回，有效期可使用',
					}).then(() =>{
					  // on close
					})
				}else if(i === "再来一单"){
					this.$router.push({path:'/menu'})
				}
			}
		}
	}
</script>

<style scoped="scoped">
	#order{
		width: 100%;
		height: 100vh;
		overflow-y: auto;
	}
	.shop{
		width: 100%;
		height: 0.6666rem;
		line-height: 0.6666rem;
		padding: 0.1333rem 0.2666rem;
	}
	.shop i{
		float: left;
		padding: 0.0666rem;
	}
	.shop_name{
		float: left;
		width: 2.4rem;
		white-space:nowrap;/* 文本不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
